<template>
	<view class="page-body">
		<!-- 页面内容开始 -->
		<!-- 表格搜索组件开始 -->
		<vk-data-table-query
			v-model="queryForm1.formData"
			:columns="queryForm1.columns"
			@search="search"
		></vk-data-table-query>
		<!-- 表格搜索组件结束 -->

		<!-- 自定义按钮区域开始 -->
		<view class="btns-box">
			<el-row>
				<!-- 批量操作 -->
				<el-dropdown v-if="table1.multipleSelection" :split-button="false"	trigger="click" @command="batchBtn">
					<el-button type="danger" size="small" style="margin-left: 20rpx;"
						:disabled="table1.multipleSelection.length === 0"
					>
						批量操作<i class="el-icon-arrow-down el-icon--right"></i>
					</el-button>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item :command="1">批量审核</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>

				<el-button type="primary" size="small" style="margin-left: 20rpx;" @click="getNotApplyUser"> 未申请的名单 </el-button>

				<el-popover
					placement="bottom"
					title="请选择时间端，可不选。"
					width="435"
					trigger="click"
				>
					<view style="text-align: center;">
						<view>
							<vk-data-input-date-time v-model="totalTime" type="daterange" :width="435"></vk-data-input-date-time>
						</view>
						<view style="margin-top: 20px;">
							<el-button type="success" size="small" @click="getTotal"> 查询 </el-button>
						</view>
					</view>
					<el-button slot="reference" type="success" size="small" style="margin-left: 20rpx;"> 查看总合计 </el-button>
				</el-popover>

			</el-row>
		</view>
		<!-- 自定义按钮区域结束 -->

		<el-container>
			<el-aside width="120px">
				<el-tabs tab-position="left" v-model="queryForm1.formData.status" @tab-click="search();" style="margin-top: 10px;">
					<el-tab-pane v-for="(item,index) in statusData" :key="item.value" :label="item.label" :name="item.value"></el-tab-pane>
				</el-tabs>
			</el-aside>

			<el-main style="padding: 0;">
				<!-- 表格组件开始 -->
				<vk-data-table
					ref="table1"
					:action="table1.action"
					:columns="table1.columns"
					:query-form-param="queryForm1"
					:right-btns="['detail_auto']"
					:custom-right-btns="[
						{ title: '审核', type: 'danger', icon: 'el-icon-edit' },
						{ title: '备注', type: 'primary', icon: 'el-icon-edit-outline' },
					]"
					:selection="true"
					:row-no="true"
					:pagination="true"
					:show-summary="true"
					:total-option="[
						{ key: 'money', 'unit': '元', type:'money' },
						{ key: 'withdrawal_money', 'unit': '元', type:'money' },
						{ key: 'service_fee', 'unit': '元', type:'money' },
					]"
					@update="updateBtn"
					@delete="deleteBtn"
					@current-change="currentChange"
					@selection-change="selectionChange"
					@custom-right-btns="customRightBtns"
				>
				</vk-data-table>
				<!-- 表格组件结束 -->
			</el-main>

		</el-container>



		<!-- 审核 -->
		<examine v-model="formDatas.examine"></examine>
		<!-- 批量审核 -->
		<batchExamine v-model="formDatas.batchExamine" @success="clearSelection"></batchExamine>
		<!-- 备注 -->
		<sellerRemark v-model="formDatas.sellerRemark"></sellerRemark>
		<!-- 未申请提现的用户列表 -->
		<notApplyUser v-model="formDatas.notApplyUser"></notApplyUser>

		<!-- 页面内容结束 -->
	</view>
</template>

<script>
	var that;													// 当前页面对象
	var vk = uni.vk;									// vk实例

	var statusData = [
		{ value:"___existent___", label:"全部" },
		{ value:"0", label:"待提现" },
		{ value:"1", label:"提现中" },
		{ value:"2", label:"已提现" },
		{ value:"3", label:"提现取消" },
		{ value:"4", label:"拒绝提现" }
	];

	import examine from './form/examine'
	import batchExamine from './form/batchExamine'
	import sellerRemark from './form/sellerRemark'
	import notApplyUser from './form/notApplyUser'

	export default {
		components:{
			examine,
			batchExamine,
			sellerRemark,
			notApplyUser
		},
		data() {
			// 页面数据变量
			return {
				// 页面是否请求中或加载中
				loading:false,
				// init请求返回的数据
				data:{

				},
				statusData,
				totalTime:[],
				// 表格相关开始 -----------------------------------------------------------
				table1:{
					// 表格数据请求地址
					action:"admin/business/sys/withdrawal.getList",
					// 表格字段显示规则
					columns:[
						{ key:"_add_time", title:"申请时间", type:"dateDiff", width:80 },
						{ key:"withdrawal_info", title:"提现账号信息", type:"object", width:240,
							columns:[
								{ key:"mobile", title:"提现人手机号", type:"text", width:120 ,defaultValue:'暂无'},
								{ key:"name", title:"提现人姓名", type:"text", width:120 ,defaultValue:'暂无'},
								{ key:"type", title:"提现方式", type:"tag", width:120 ,
									formatter: function(val, row, column, index) {
										switch(val){
											case  1 :return { val: "支付宝", tagType: "success" };  break;
											case  2 :return { val: "微信", tagType: "success" };  break;
											case  3 :return { val: "银行卡", tagType: "success" };  break;
											default :break;
										}
									},
								},
								{ key:"account_no", title:"提现账户号码", type:"text", width:240 ,defaultValue:'暂无'},
								{ key:"bank_name", title:"银行名称", type:"text", width:240 ,defaultValue:'暂无'},
								{ key:"bank_open", title:"开户行", type:"text", width:240 ,defaultValue:'暂无'},
							]
						},
						{ key:"", title:"用户信息", type:"group", width:280,
							columns:[
								{ key:"_id", title:"订单ID", type:"text", width:90 },
								{ key:"no", title:"订单号", type:"text", width:250 },
								{ key:"user_id", title:"用户ID", type:"text", width:90 },
								{ key:"userInfo.nickname", title:"昵称", type:"text", width:120 },
								{ key:"userInfo.comment", title:"昵称备注", type:"text", width:120 },
								{ key:"userInfo.mobile", title:"手机", type:"text", width:120 },
							]
						},
						{ key:"money", title:"申请金额", type:"money", width:120 },
						{ key:"withdrawal_money", title:"到账金额", type:"money", width:120 },
						{ key:"service_fee", title:"提现服务费", type:"money", width:100 ,defaultValue:'暂无'},
						{ key:"status", title:"状态", type:"tag", width:100 ,
							formatter: function(val, row, column, index) {
								switch(val){
									case  0 :return { val: "待提现" ,   tagType: "info" };     break;
									case  1 :return { val: "提现中" ,   tagType: "success" };  break;
									case  2 :return { val: "已提现" ,   tagType: "success" };  break;
									case  3 :return { val: "提现取消" , tagType: "warning" };  break;
									case  4 :return { val: "拒绝提现" , tagType: "danger" };   break;
									default :break;
								}
							},
						},
						{ key:"mode", title:"提现类型", type:"tag", width:100,
							formatter: function(val, row, column, index) {
								switch(val){
									case  0 :return { val: "普通提现", tagType: "primary" };  break;
									case  1 :return { val: "极速提现", tagType: "success" };  break;
									default :return { val: "暂无", tagType: "info" };break;
								}
							},
						},
						{ key:"title", title:"标题", type:"text", width:240 },
						{ key:"comment", title:"用户备注", type:"text", width:300 },
						{ key:"seller_remark", title:"商家审核备注", type:"text", width:300 },
						{ key:"payment_no", title:"支付单号", type:"text", width:240, defaultValue:'暂无'},
						{ key:"del_time", title:"删除时间", type:"time", width:160, show:"detail" },
						{ key:"cancel_time", title:"取消时间", type:"time", width:160, show:"detail" },
						{ key:"_add_time", title:"申请时间", type:"time", width:160 },
					],
					// 多选框选中的值
					multipleSelection:[],
					// 当前高亮的记录
					selectItem:"",
				},
				// 表格相关结束 -----------------------------------------------------------
				// 表单相关开始-----------------------------------------------------------
				// 查询表单请求数据
				queryForm1:{
					// 查询表单数据源，可在此设置默认值
					formData:{

					},
					// 查询表单的字段规则 fieldName:指定数据库字段名,不填默认等于key
					columns:[
						{ key:"status", title:"状态", type:"select", width:140, isNumber:true, show:["none"],
							data:statusData
						},
						{ key:"user_id", title:"用户筛选", type:"remote-select", placeholder:"请输入姓名或手机号", width:180,
							action:"admin/select/kh/user",
						},
						{ key:"mode", title:"提现类型", type:"select", width:170,
							data:[
								{ value:0, label:"普通提现" },
								{ value:1, label:"极速提现" },
							],
						},
						{ key:"_add_time", title:"申请时间", type:"datetimerange", width:360, mode:"[]" },
					]
				},
				// 表单弹窗数据源
				formDatas:{},
				// 表单相关结束-----------------------------------------------------------
			};
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.options = options;
			that.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {

			},
			// 页面跳转
			pageTo(path) {
				vk.navigateTo(path);
			},
			// 页面返回
			pageBack(path){
				const pages = getCurrentPages();
				if (pages.length>1 && pages[0].route !== that.$page.route) {
					vk.navigateBack();
				} else if(path) {
					vk.navigateTo(path);
				}
			},
			// 搜索
			search(){
				that.$refs.table1.query();
			},
			// 刷新
			refresh(){
				that.$refs.table1.refresh();
			},
			// 获取当前选中的行的数据
			getCurrentRow(){
				return that.$refs.table1.getCurrentRow();
			},
			// 监听 - 行的选中高亮事件
			currentChange(val){
				that.table1.selectItem = val;
			},
			// 当选择项发生变化时会触发该事件
			selectionChange(list) {
				that.table1.multipleSelection = list;
			},
			// 监听 - 批量操作的按钮点击事件
			batchBtn(index){
				switch(index){
					case 1: that.batchExamine(); break;
					default : break;
				}
			},
			customRightBtns(item, btn){
				if(btn.title === "审核"){
					vk.pubfn.openForm('examine',{ item })
				}else if(btn.title === "备注"){
					vk.pubfn.openForm('sellerRemark',{ item })
				}
			},
			// 批量审核
			batchExamine(){
				let list = that.$refs.table1.getMultipleSelection();
				vk.pubfn.openForm('batchExamine',{ list })
			},
			clearSelection(){
				that.$refs.table1.clearSelection();
			},
			// 查看总合计
			getTotal(){
				// 包含 未申请提现 已申请未提现 已申请已提现 累计奖励
				vk.callFunction({
					url: 'admin/business/sys/withdrawal.getTotal',
					title:'统计中...',
					data:{
						totalTime: that.totalTime
					},
					success:function(data){
						that.$alert(`未申请（在途奖励）：${data.m1Str} <br/>
						未申请（可提现）：${data.m2Str} <br/>
						已申请（未提现）：${data.m3} 元<br/>
						已申请（已提现）：${data.m4} 元<br/>
						累计奖励（累计）：${data.m0} 元`, '提示', {
							dangerouslyUseHTMLString: true
						});
					}
				});
			},
			// 查看未申请提现的用户列表
			getNotApplyUser(){
				vk.pubfn.openForm('notApplyUser', { })
			}
		},
		// 监听属性
		watch: {

		},
		// 计算属性
		computed: {

		}
	};
</script>
<style lang="scss" scoped>
	.page-body {

	}
</style>
